// 向外暴露一个模块出口
const path = require('path');
const webapck = require('webpack'); //热加载第二步
const htmlWebpackPlugin = require('html-webpack-plugin'); //在内存生成html模板页面
module.exports = {
    entry: path.join(__dirname, "./src/main.js"), //指定进口文件
    output: { //指定出口文件的信息
        path: path.join(__dirname, "./dist"),
        filename: "bundle.js"
    },
    devServer: { //配置webpack-dev-server
        open: true,
        port: 8090,
        contentBase: "src",
        hot: true, //开启热加载
    },
    plugins: [
        new webapck.HotModuleReplacementPlugin(),
        new htmlWebpackPlugin({ //在内存生成html模板
            template: path.join(__dirname, "./src/index.html"),
            filename: "index.html"
        })
    ],
    module: { //配置处理文件的loader规则
        rules: [ //规则
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.js$/,
                use: "babel-loader",
                exclude: /node_modules/
            },
            {
                test: /\.(jpg|png|gif|bmp|jpeg)$/,
                use: [{
                    loader: "url-loader",
                    options: { //配置处理图片的规则
                        limit: 1024,
                        name: "[hash:8]-[name].[ext]"
                    }
                }]
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                use: "url-loader"
            },
            {
                test: /\.less$/,
                use: ["style-loader", "css-loader", "less-loader"]
            },
            {
                test: /\.scss$/,
                use: ["style-loader", "css-loader", "sass-loader"]
            },
            {
                test: /\.vue$/,
                use: "vue-loader"
            }
        ]
    }
}